import React from 'react'
import {WeaColorPicker,
    WeaSearchGroup,
    WeaFormItem,
    WeaInput,
    WeaSelect,
    WeaLocaleProvider,
    WeaInputNumber,
    WeaError,
    WeaCheckbox,
    WeaUpload,
    WeaBrowser,
    WeaDialog
} from 'ecCom'
import {Button,Row,Icon} from 'antd'
const getLabel = WeaLocaleProvider.getLabel;

class Content extends React.Component{




     optionColor = () =>{
        return (
            <WeaFormItem label={getLabel(2076,"字体颜色")} labelCol={{span: 8}} wrapperCol={{span: 14}}  >
                <div style={{display:'inline-block',width:'70px'}}>
                    <WeaColorPicker value={this.props.data.itemcolor}  style={{"width":40}}
                                    onChange = {(value) => this.props.changeItemColor(value)}
                    />
                </div>
            </WeaFormItem>
        )
    }

    optionBgColor = () =>{
        return (
            <WeaFormItem label={getLabel(2077,"背景颜色")} labelCol={{span: 8}} wrapperCol={{span: 14}} >
                <div style={{display:'inline-block',width:'70px'}}>
                    <WeaColorPicker value={this.props.data.itembg}
                                    onChange = {(value) => this.props.changeItembg(value)}
                    />
                </div>
            </WeaFormItem>
        )
    }

    optionBgTMD = () =>{
        return (
            <WeaFormItem label={getLabel(500298,"透明度")} labelCol={{span: 8}} wrapperCol={{span: 14}} >
                <div style={{display:'inline-block',width:'70px'}}>
                    <WeaInputNumber value={this.props.data.itembgtmd}
                                    onChange = {(value) => this.props.changeItembgTMD(value)}
                    />
                </div>
            </WeaFormItem>
        )
    }


    selectBgColor = () =>{
        return (
            <WeaFormItem label={getLabel(84141,"选中颜色")} labelCol={{span: 8}} wrapperCol={{span: 14}} >
                <div style={{display:'inline-block',width:'70px'}}>
                    <WeaColorPicker value={this.props.data.selectbg}
                                    onChange = {(value) => this.props.changeselectedBg(value)}
                    />
                </div>
            </WeaFormItem>
        )
    }

    selectBgTmd = () => {
         return ( <WeaFormItem label={getLabel(500300,"选中透明度")} labelCol={{span: 9}} wrapperCol={{span: 14}}  >
                         <div style={{display:'inline-block',width:'70px',"margin-left": -10}}>
                             <WeaInputNumber value={this.props.data.selectTmd}
                                             onChange = {(value) => this.props.changeXzTmd(value)}
                             />
                         </div>
                     </WeaFormItem>)

    }
    sskH = () =>{
   return <WeaFormItem label={getLabel(207,"高度")}  labelCol={{span: 8}} wrapperCol={{span: 14}}>
            <WeaInputNumber
                value = {this.props.data.searchheight}
                onChange = {(value)=> this.props.changeSearchHeight(value)}
            />
        </WeaFormItem>
    }

    sskRadius = () => {
      return   <WeaFormItem label={getLabel(500299,"圆角值")}  labelCol={{span: 8}} wrapperCol={{span: 14}}>
                      <WeaInputNumber
                          value = {this.props.data.radius}
                          onChange = {(value)=> this.props.radiusChange(value)}
                      />
               </WeaFormItem>
    }

    sskBg = () => {
     return <WeaFormItem label={getLabel(2077,"背景颜色")} labelCol={{span: 8}} wrapperCol={{span: 14}} >
                <div style={{display:'inline-block',width:'70px'}}>
                    <WeaColorPicker value={this.props.data.bgColor}
                                    onChange = {(value) => this.props.changebgColor(value)}
                    />
                </div>
            </WeaFormItem>
    }

    sskTmd = () => {
      return  <WeaFormItem label={getLabel(500298,"透明度")} labelCol={{span: 8}} wrapperCol={{span: 14}} >
                    <div style={{display:'inline-block',width:'70px'}}>
                        <WeaInputNumber value={this.props.data.bgtmd}
                                        onChange = {(value) => this.props.changebgTMD(value)}
                        />
                    </div>
               </WeaFormItem>

    }

    render(){

         const items=[{com:this.optionColor()},{com:this.optionBgColor()},{com:this.optionBgTMD()},{com:this.selectBgColor()},{com:this.selectBgTmd()}];
         const items2=[{com:this.sskH()},{com:this.sskRadius()},{com:this.sskBg()},{com:this.sskTmd()}];
        return <div>
               <WeaSearchGroup showGroup={true} title={getLabel(500297,"提示样式设置")}>

                   <WeaFormItem label={getLabel(82346,'搜索提示')} labelCol={{span: 6}} wrapperCol={{span: 16}} style={{"margin-left":30}}>
                       <WeaInput  style={{width:313}} value={this.props.data.defaultcon} viewAttr={3} onChange={(value)=> {this.props.changeDefaultCon(value)}}/>
                   </WeaFormItem>
                   <WeaFormItem label={getLabel(500296,"提示字体颜色")} labelCol={{span: 6}} wrapperCol={{span: 16}}  style={{"margin-left":30}} >
                       <div style={{display:'inline-block',width:'70px'}} >
                           <WeaColorPicker value={this.props.data.concolor}  style={{"width":40}}
                                           onChange = {(value) => this.props.changeConColor(value)}
                           />
                       </div>
                   </WeaFormItem>

               </WeaSearchGroup>
               <WeaSearchGroup showGroup={true} title={getLabel(500295,"类型样式设置")} items={items}>

               </WeaSearchGroup>
               <WeaSearchGroup showGroup={true} title={getLabel(500294,"搜索框样式设置")} items={items2} >

               </WeaSearchGroup>
           </div>




    }
}

export default Content;